<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2024/10/28
  Time: 9:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>调动信息页面</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<%--===================================================搜索框========================================================--%>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="searchForm.transfertime"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索<i class="el-icon-search el-icon--right"></i></el-button>
            <el-button type="primary" @click="refresh">刷新<i class="el-icon-refresh el-icon--right"></i></el-button>
        </el-form-item>
    </el-form>
<%--================================================调动信息表单===================================================--%>
    <template>
        <el-table
                :data="staffExInfo"
                style="width: 100%"
                border
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="sid"
                    label="调动编号"
            >
            </el-table-column>
            <el-table-column
                    prop="staff.staffname"
                    label="员工姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="oldBranch.branchname"
                    label="所属分店">
            </el-table-column>
            <el-table-column
                    prop="oldDept.deptname"
                    label="部门名称">
            </el-table-column>
            <el-table-column
                    prop="oldRole.rolename"
                    label="旧职位名称">
            </el-table-column>
            <el-table-column
                    prop="newBranch.branchname"
                    label="新所属分店">
            </el-table-column>
            <el-table-column
                    prop="newDept.deptname"
                    label="新部门名称">
            </el-table-column>
            <el-table-column
                    prop="newRole.rolename"
                    label="新职位名称">
            </el-table-column>
            <el-table-column
                    prop="transfertime"
                    label="执行时间">
            </el-table-column>
            <el-table-column
                    prop="transferperStaff.staffname"
                    label="执行人">
            </el-table-column>

        </el-table>
    </template>
<%--~~~~~~~~~~~~~~~~~~~~~~~分页~~~~~~~~~~~~~~~~~~~~~--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<%--=======================================================js代码====================================================--%>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            searchForm: {},//搜索表单对象
            staffExInfo:undefined,//调动信息集合
            currentPage: 1,//当前页码
            pageSize: 10,//每页显示条数
            total: 0,//总条数
        },
        created(){
            this.loadStaffExAll();//初始化加载
        },
        methods:{
            //加载调动信息
            loadStaffExAll(){
               axios.post("/shopkeeperchange/getAll?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,this.searchForm).then(resp=>{
                       this.staffExInfo = resp.data.data.list;
                       this.total = resp.data.data.total;
           })
            },
            // 每页条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadStaffExAll();
            },
            // 页码
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadStaffExAll();
            },
            //查询
            onSubmit(){
                this.loadStaffExAll();
            },
            //刷新
            refresh(){
                this.searchForm = {};//清空搜索框
                this.loadStaffExAll();//重新加载数据
            },
            //表格中行的样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 3) {
                    return 'success-row';
                }
                return '';
            },
        }
    })
</script>
</body>
</html>
